<template>
    <div class="home_section">
        <section class="banner_section">
            <div class="w">
                <!-- 轮播 -->
                    <el-carousel :loop="true" trigger="click" initial-index="2" pause-on-hover height="450px">
                        <el-carousel-item v-for="(item,index) in BannerImgs" :key="item.carousel_id">
                            <img :src="`http://101.132.181.9/api/${item.imgPath}`">
                        </el-carousel-item>
                    </el-carousel>
            </div>
        </section>
            <div class="top">
                <div class="w clearfix">
                    <span class="big">手机</span>
                </div>
            </div>
            <CateList :data="phoneList"></CateList>
             <div class="top">
                <div class="w clearfix">
                    <span class="big fl">家电</span>
                    <ol class="clearfix fr">
                        <li class="" @mousemove="changeTab">热门</li>
                        <li class="" @mousemove="changeTab">电视影音</li>
                    </ol>
                </div>
            </div>
            <div class="posi">
                <CateList v-if="hotFlag" :data="TVList"></CateList>
                <CateList v-if="!hotFlag" :data="HotTVList"></CateList>
            </div>
        <!-- </section> -->
    </div>
</template>
<script setup>
import CateList from '@/components/CateList.vue'
import { ref,reactive ,onMounted } from 'vue'
import { getBannerList,getPhoneList,getElectricalList } from '@/utils/home.js'
const BannerImgs = ref([]);
const getBanner = async ()=>{
    let data = await getBannerList();
    // console.log(data);
    if(data.status == 200){
        BannerImgs.value = data.data.carousel;
        console.log(BannerImgs.value);
    }
}
const phoneList = reactive({
    title:'手机',
    left_img:'http://101.132.181.9:3000/public/imgs/phone/phone.png',
    data:[],
});
const getPhone = async ()=>{
    var obj = {categoryName:'手机'}
    let data = await getPhoneList(obj);
    console.log(data);
    phoneList.data = data.data.Product;
}
const hotFlag = ref(false);
const TVList = reactive({
    title:'',
    left_img:'http://101.132.181.9:3000/public/imgs/phone/phone.png',
    data:[],
});
const getTv = async ()=>{
    var obj = {categoryName:'电视机'}
    let data = await getPhoneList(obj);
    console.log(data);
    TVList.data = data.data.Product;
}
// electrical

const HotTVList = reactive({
    title:'',
    left_img:'http://101.132.181.9:3000/public/imgs/phone/phone.png',
    data:[],
});
const getelectrical = async ()=>{
    var obj = {categoryName:['电视机','空调','洗衣机']};
    var data = await getElectricalList(obj);
    HotTVList.data = data.data.Product;
    console.log(data,5);
}
const changeTab = ()=>{
    if(hotFlag.value){
        hotFlag.value = false;
    }else{ 
        hotFlag.value = true;
    }

}
onMounted(() => {
  getBanner();  
  getPhone();
  getTv();
  getelectrical();
})
</script>
<style lang="scss" scoped>
        .banner_section{
            background: #fff;
            border-radius: 0%;
            padding: 20px 0;
            .w{ 
                img{
                    width: 100%;
                }
            }
        }
        .posi{
            position: relative;
            .tab_box{
                position: absolute;
                right: 200px;
                top: 0;
            }
        }
        .top{        
            background: rgb(233, 233, 233);
            height: 60px;
            .big{
                line-height: 60px;
                font-size: 24px;
            }
            ol{
                li{
                    margin: 0 20px;
                    line-height: 50px;
                    font-size: 20px;
                    float: left;
                    border-bottom: 2px solid transparent;
                }
                licheck{
                    border-bottom: 2px solid red;
                    color: red;
                }
            }
        }
</style>